{% extends 'base_with_top_menu.html' %}

{% load go_back_link %}

{% block title %}{{ book.title }}{% endblock %}

{% block header %}{% if for_whom %} {{ for_whom }} {% else %} Book copies {% endif %} {% endblock %}

{% block content %}

    <h2>Title: {{ book.title }}</h2>

    <div class="book_authors">
        <dt>Authors:</dt>
        {% if book.authors %}
        <dd>{{ book.authors|join:', '}}</dd>
        {% else %}
        <dd>No authors.</dd>
        {% endif %}
    </div>

    <div class="book_categories">
      <dt>Categories:</dt>
      {% if book.categories %}
      <dd>{{ book.categories|join:", " }}</dd>
      {% else %}
      <dd>This book wasn't assigned to any category.</dd>
      {% endif %}
    </div>


    {% if display_tips %}
    <div class="tip">
      <p>1. If you use Firefox or Opera you can click and drag to multiselect locations. In Chrome you can use CTRL+click</p>
      <p>2. Selecting "Any" has effect only iff nothing else is selected. If "Any" and sth else is selected, then "Any" would be deselected</p>
    </div>
    {% endif %}

    {% if search.locations %}
    <div class='content_form'>
        <form action='.#book_copies' method='post'>
            <table>
                <tr>
                    <td>Location: </td>
                    <td>
                        <select name='location' multiple='multiple' size='{{ search.copies_location_select_size }}'>
                            {% for location in search.locations %}
                                <option value='{{ location.id }}' {% if location.selected %}selected{% endif %}>{{ location.name }}</option>
                            {% endfor %}
                        </select>
                    </td>
                </tr><tr>
                    <td>Only available: </td>
                    <td>
                        <input type='checkbox' name='available' value='available' {% if only_available_checked %} checked='checked' {% endif %} >
                    </td>
                </tr><tr>
                    <td></td><td>
                        <input type='submit'  name='action' value='Search'>
                    </td></tr>
            </table>
        </form>
    </div>
    {% else %}
    <!-- <p>No locations defined.</p> -->
    {% endif %}

    <div class="bookcopy_actions">
      {% if perms.baseapp.add_bookcopy %}
      <p>
        <a href="/entelib/admin/baseapp/bookcopy/add/?book={{book.id}}" class="add_bookcopy">Add another copy</a>
      </p>
      {% endif %}
    </div>

    {% comment %}
    If no argument is specified, then default one will be loaded - which is set in Config.
    Try typing:
    {% go_back_link %}
    {% endcomment %}
    {% go_back_link "Go back" %}

    <div class="book_copies">
      <h3 id="book_copies">Copies of this book:</h3>
      {% if display_tips %}
      <div class="tip">
        <ol>
          <li><p>If you reserve book that is unavailable, you will be <em>unable to rent it</em>.</p></li>
        </ol>
      </div>
      {% endif %}

        {% if book.items %}

            <!-- TIME BAR -->
            {% if display_time_bar %}
            {% include "time_bar/controls.html" %}
            {% endif %}

            <!-- LIST OF COPIES -->
            <table id="booklist" class="tablesorter booklist">
                <thead>
                    <tr>
                    <th></th>
                    <th>Location</th>
                    <th title="aka Shelf mark">Shelfmark</th>
                    <th>State</th>
                    <th>Publisher</th>
                    <th>Year</th>
                    <th>Actions</th>
                    </tr>
                </thead>
                <tbody>

                {% for item in book.items %}

                    <!-- TIME BAR for copy -->
                    {% if item.tb_code and display_time_bar %}
                    <tr id="tr_{{item.shelf_mark}}"><td colspan="7" style="padding:0;">
                        {% autoescape off %}
                        {{ item.tb_code }}
                        {% endautoescape %}
                    </td></tr>
                    {% endif %}

                    <!-- COPY's DETAILS -->
                    <tr>
                        <td class="url"><a href='{{ item.url }}'><img src="{{MEDIA_URL}}/images/details.png"></a></td>
                        <td class="location">{{ item.location }}</td>
                        <td class="shelfmark">{{ item.shelf_mark }}</td>
                        <td class="state">{{ item.state }} {% if not item.is_available %}<span style="color:red;" title="Unavailable, sorry"><br/>(unavailable)</span>{%endif%}</td>
                        <td class="publisher">{{ item.publisher }}</td>
                        <td class="year">{{ item.year }}</td>
                        <td class="actions">
                            <ul class="actions">
                                <!-- <li><a href='{{ item.desc_url}}'>External description</a></li> -->
                                {%if item.is_reservable %}<li><a href='{{ item.reserve_url }}'
                                                                 {% if not item.is_available %}class="available" title="Book is not available"{% endif %}>
                                                                 Reserve
                                                              </a></li> {% endif %}
                            </ul>
                        </td>
                    </tr>

                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <br><b>No copies.</b>
        {% endif %}
    </div>
    {% go_back_link "Go back" %}

    <script type='text/javascript'>
    <!--
        $(document).ready(function()
        {
            var posX = 0;
            var posY = 0;
            
            $(".green").mousemove(function(e)
            {
                if (!e) var e = window.event;
                $("#cloud").html($('input[name=val]', this).val());
                $("#cloud").show();
                if (e.pageX || e.pageY)
                {
                    posX =  e.pageX - document.body.scrollLeft -
                            document.documentElement.scrollLeft + 10;
                    posY = e.pageY - document.body.scrollTop -
                            document.documentElement.scrollTop - 30;
                }
                else
                    if (e.clientX || e.clientY)
                    {
                        posX = e.clientX + 10;
                        posY = e.clientY - 30;
                    }
                $('#cloud').css({'left': posX, 'top': posY}); 
            });            
            $(".green").mouseout(function()
            {
                $("#cloud").hide(); 
            });
            $(".red").mousemove(function(e)
            {
                
                if (!e) var e = window.event;
                $("#cloud").html($('input[name=val]', this).val());
                $("#cloud").show();
                if (e.pageX || e.pageY)
                {
                    posX =  e.pageX - document.body.scrollLeft -
                            document.documentElement.scrollLeft + 10;
                    posY = e.pageY - document.body.scrollTop -
                            document.documentElement.scrollTop - 30;
                }
                else
                    if (e.clientX || e.clientY)
                    {
                        posX = e.clientX + 10;
                        posY = e.clientY - 30;
                    }
                $('#cloud').css({'left': posX, 'top': posY}); 
            });            
            $(".red").mouseout(function()
            {
                $("#cloud").hide(); 
            })
        })
    //-->
    </script>
    <div id="cloud" class='cloud'></div>

{% endblock %}
